<template>
  <div class="group">
    <device-header :info="HeadObj"></device-header>
    <el-card class="box-card card-top">
      <div class="myquery">
        <div class="query-con">
          <span class="groupname">群组名称:</span>
          <el-input
            placeholder="群组名称"
            class="groupinput"
            v-model="groupQuery.keyword"
          ></el-input>
          <el-button type="primary" icon="el-icon-search" @click="searchData"
            >搜索</el-button
          >
          <span>搜索结果：{{ total }}</span>
        </div>

        <el-button type="primary" class="btn" @click="addDialog"
          >新增群组<i class="el-icon-plus el-icon--right"></i
        ></el-button>
      </div>
    </el-card>

    <el-table :data="groupdata" style="width: 100%" class="group-list">
      <el-table-column type="index" width="80"> </el-table-column>
      <el-table-column prop="groupName" label="群组名称" width="180">
      </el-table-column>
      <el-table-column prop="nodeNums" label="传感器节点数量">
      </el-table-column>
      <el-table-column prop="onlineNums" label="在线设备数量">
      </el-table-column>
      <el-table-column prop="cTime" label="创建时间"> </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <div class="caozuo">
            <span @click="showDialog(scope.row.id, scope.row.groupName)"
              >重命名</span
            >
            <span @click="handleDel(scope.row.id)">删除</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页选择 -->
    <div class="group-sel">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="groupQuery.currPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="groupQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <!-- 弹窗   :before-close="handleClose"-->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="群组名称" prop="groupName">
            <el-input v-model="ruleForm.groupName"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="HandleOk">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { $groupList, $groupAdd, $groupEdit, $groupDel } from '@/api/index.js'
import DeviceHeader from '../../components/DeviceHeader.vue'

export default {
  name: 'groups',
  data () {
    return {
      HeadObj: {
        type: '设备',
        text: '节点群组',
        content:
          '以分组的形式管理节点设备，提供了搜索、添加新的群组、重命名、移动设备等功能。'
      },
      groupdata: [],
      groupQuery: {
        currPage: 1, // 当前页
        pageSize: 5, //
        keyword: ''
      },
      total: 12,
      dialogVisible: false, // 弹窗是否显示

      ruleForm: { groupName: '' }, // 添加或修改时，群组名称
      rules: {
        // 做验证处理 validate
        groupName: [
          { required: true, message: '请输入群组名称', trigger: 'blur' }
        ]
      },
      editId: '' // 要修改的数据id
    }
  },
  components: { DeviceHeader },
  mounted () {
    this.getGroupList()
  },
  methods: {
    // 新增群组条件,窗口
    addDialog () {
      this.dialogVisible = true
      this.editId = ''
      this.ruleForm.groupName = ''
    },
    // 显示修改窗口，带参
    showDialog (id, groupName) {
      this.dialogVisible = true
      this.editId = id
      this.ruleForm.groupName = groupName
    },
    // 渲染
    getGroupList () {
      $groupList(this.groupQuery).then((res) => {
        console.log(res.data)
        this.groupdata = res.data.data
        this.total = res.data.total
      })
    },
    // 分页
    handleSizeChange (num) {
      // console.log(num);
      this.groupQuery.pageSize = num
      this.groupQuery.currPage = 1
      // 重新获取数据
      this.getGroupList()
    },
    handleCurrentChange (num) {
      this.groupQuery.currPage = num
      this.getGroupList()
      // console.log(num);
    },
    // 添加群组弹窗点击确定
    HandleOk () {
      // 验证 表单提交的数据是否符合验证条件
      console.log(1111)
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.editId !== '') {
            // editId不等于空就为修改
            this.editItem()
          } else {
            // 否则就为添加
            this.addItem()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 搜索
    searchData () {
      this.getGroupList()
    },
    // 添加
    addItem () {
      // 添加接口
      $groupAdd({ groupName: this.ruleForm.groupName }).then((res) => {
        console.log(res)
        // 判断是否添加成功
        if (res.data.msg == 'success') {
          this.$message({
            message: '恭喜添加成功',
            type: 'success'
          })
          // 关闭弹窗
          this.dialogVisible = false
          // 重新调用渲染列表
          this.getGroupList()
        }
      })
    },
    // 修改
    editItem () {
      $groupEdit({ id: this.editId, groupName: this.ruleForm.groupName }).then(
        (res) => {
          console.log(res)
          // 判断是否修改成功
          if (res.data.msg == 'success') {
            this.$message({
              message: '恭喜修改成功',
              type: 'success'
            })
            // 关闭弹窗
            this.dialogVisible = false
            // 重新调用渲染列表
            this.getGroupList()
          }
        }
      )
    },
    // 删除
    handleDel (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          $groupDel({ id: id }).then((res) => {
            console.log(res)
            if (res.data.code === 666) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
            // 重新页数置为1
            this.groupQuery.currPage = 1
            // 重新调用渲染列表
            this.getGroupList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style scoped lang="less">
.group {
  .myquery {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .query-con {
      width: 600px;
      margin: -10px;
      display: flex;
      align-items: center;
      .groupname {
        display: inline-block;
        width: 50px;
        color: #333;
      }
      .groupinput {
        width: 100px;
        margin: 0 20px;
      }
      span:nth-of-type(2) {
        margin-left: 80px;
        font-size: 13px;
        color: #666;
      }
    }
  }
  .group-list {
    margin-top: 10px;
  }
  .group-sel {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    margin-bottom: 200px;
  }
  .caozuo {
    width: 200px;
    margin-left: -9px;
    position: relative;
    span {
      display: inline-block;
      color: rgb(6, 175, 241);
      margin-right: 10px;
    }
    span {
      &:hover {
        cursor: pointer;
        text-decoration: underline;
      }
    }
  }
}
</style>
